 <template>
  <div class="message-wrapper" :class="messagePosition">
    <div class="date">{{ date }}</div>

    <div
      class="c2c-layout"
      :class="messagePosition"
    >

      <div class="col-1">
        <!-- 头像 -->

        <img class="avatar" v-if="!isMine && messageDetail.sender && (messageDetail.sender.user_id == user_id)"
             :src="messageDetail.recipient.avatar" alt="">

        <img class="avatar" v-if="isMine && messageDetail.sender && (messageDetail.sender.user_id == user_id)"
             :src="messageDetail.sender.avatar" alt="">

        <img class="avatar" v-if="!isMine && messageDetail.recipient && (messageDetail.recipient.user_id == user_id)"
             :src="messageDetail.sender.avatar" alt="">

        <img class="avatar" v-if="isMine && messageDetail.recipient && (messageDetail.recipient.user_id == user_id)"
             :src="messageDetail.recipient.avatar" alt="">

        <img class="avatar" v-if="isMine && messageDetail.recipient && (messageDetail.recipient.user_id == user_id) && !messageDetail.recipient.avatar"
             src="../assets/img/toxiang@2x.png" alt="">

        <img class="avatar" v-if="isMine && messageDetail.sender && (messageDetail.sender.user_id == user_id) && !messageDetail.sender.avatar"
             src="../assets/img/toxiang@2x.png" alt="">

      </div>
      <div class="col-2">
        <!-- 消息主体 -->
        <div class="message-content">
          <text-element
            v-if="message.type === TIM.TYPES.MSG_TEXT"
            :isMine="isMine"
            :payload="message.payload"
          />
          <image-element
            v-else-if="message.type === TIM.TYPES.MSG_IMAGE"
            :isMine="isMine"
            :payload="message.payload"
          />
          <file-element
            v-else-if="message.type === TIM.TYPES.MSG_FILE"
            :isMine="isMine"
            :payload="message.payload"
          />
          <sound-element
            v-else-if="message.type === TIM.TYPES.MSG_SOUND"
            :isMine="isMine"
            :payload="message.payload"
          />
          <custom-element
            v-else-if="message.type === TIM.TYPES.MSG_CUSTOM"
            :isMine="isMine"
            :payload="message.payload"
          />
          <face-element
            v-else-if="message.type === TIM.TYPES.MSG_FACE"
            :isMine="isMine"
            :payload="message.payload"
          />
          <video-element
            v-else-if="message.type === TIM.TYPES.MSG_VIDEO"
            :isMine="isMine"
            :payload="message.payload"
          />
          <span v-else>暂未支持的消息类型：{{message.type}}</span>
        </div>
        <!--<message-footer v-if="showMessageHeader" :message="message" />-->
      </div>

      <div class="col-3" v-if="message.status != 'success'">
        <!-- 消息状态 -->
        <message-status-icon :message="message" />
      </div>
    </div>
  </div>
</template>

<script>
import MessageStatusIcon from './message-elements/message-status-icon.vue'
// import MessageHeader from './message-header'
// import MessageFooter from './message-footer'
import FileElement from './message-elements/file-element.vue'
import FaceElement from './message-elements/face-element.vue'
import ImageElement from './message-elements/image-element.vue'
import TextElement from './message-elements/text-element.vue'
import SoundElement from './message-elements/sound-element.vue'
import VideoElement from './message-elements/video-element.vue'
import CustomElement from './message-elements/custom-element.vue'
export default {
  name: 'MessageItem',
  props: {
    message: {
      type: Object,
      required: true
    },
    messageDetail:{

    }
  },
  components: {
    // MessageHeader,
    // MessageFooter,
    MessageStatusIcon,
    FileElement,
    FaceElement,
    ImageElement,
    TextElement,
    SoundElement,
    CustomElement,
    VideoElement
  },
  data() {
    return {
      renderDom: [],
      user_id:null
    }
  },
  mounted(){
    this.user_id = sessionStorage.getItem('userID').split(/[a-z]/)[0];
  },
  computed: {
    // 是否显示头像，群提示消息不显示头像
    date() {
      return this.message.time/*getFullDate(new Date(this.message.time * 1000))*/
    },
    isMine() {
      // console.log(this.currentUserProfile, this.currentConversation);
      return this.message.flow === 'out'
    },
    messagePosition() {
      if (this.isMine) {
        return 'position-right'
      } else {
        return 'position-left'
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.message-wrapper {
  margin: 20px 0;
  .date{
    text-align: center;
    font-size:14px;
    color:rgba(177,177,179,1);
    margin-bottom: 30px;
  }
}
.group-layout, .c2c-layout, .system-layout {
  display: flex;

  .col-1 {
    .avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .col-2 {
    display: flex;
    flex-direction: column;
    .base{
      margin-left 10px
    }
    // max-width 50% // 此设置可以自适应宽度，目前由bubble限制
  }

  .col-3 {
    width: 30px;
  }

  &.position-left {
    .col-2 {
      align-items: flex-start;
    }
  }

  &.position-right {
    flex-direction: row-reverse;

    .col-2 {
      align-items: flex-end;
    }
  }

  &.position-center {
    justify-content: center;
  }
}

.c2c-layout {
  .col-1 {
    .avatar {
      width: 36px;
      height: 36px;
    }
  }
  .col-2 {
    align-self center
    max-width:540px;
    min-height:36px;
    .base {
      margin-top: 3px;
    }
  }
}

.group-layout {
  .col-2 {
    .chat-bubble {
      margin-top: 5px;
    }
  }
}
.system-layout{
  .col-2 {
    justify-content space-between
  }
}
</style>
